<template>
  <el-drawer model-value="drawerVisible" @close="handleClose">
    <template #header>
      <h4>资产信息</h4>
    </template>
    <div>
      <ul class="list-group list-group-striped">
        <li class="list-group-item">
          <svg-icon icon="user"/>&nbsp;&nbsp;入库时间
          <div class="pull-right">{{ currencyFormatDate(assetData.rksj) }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon="phone"/>&nbsp;&nbsp;资产编号
          <div class="pull-right">{{ assetData.zcbh }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon="email"/>&nbsp;&nbsp;资产名称
          <div class="pull-right">{{ assetData.zcmc }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon="peoples"/>&nbsp;&nbsp;所属类别
          <div class="pull-right">{{ assetData.typeName }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon="date"/>&nbsp;&nbsp;资产型号
          <div class="pull-right">{{ assetData.zcxh }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon="user"/>&nbsp;&nbsp;资产单价
          <div class="pull-right">{{ assetData.zcdj }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon="phone"/>&nbsp;&nbsp;资产金额
          <div class="pull-right">{{ assetData.zcje }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon="email"/>&nbsp;&nbsp;生厂日期
          <div class="pull-right">{{ currencyFormatDate(assetData.scrq) }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon="user"/>&nbsp;&nbsp;生厂厂家
          <div class="pull-right">{{ assetData.sccj }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon="peoples"/>&nbsp;&nbsp;购买日期
          <div class="pull-right">{{ currencyFormatDate(assetData.gmrq) }}</div>
        </li>
        <li class="list-group-item">
          <svg-icon icon="date"/>&nbsp;&nbsp;购买人
          <div class="pull-right">
            <span v-if="assetData.gmr==='1'">员工1</span>
            <span v-else-if="assetData.gmr==='2'">员工2</span>
            <span v-else-if="assetData.gmr==='3'">员工3</span>
          </div>
        </li>
        <li class="list-group-item">
          <svg-icon icon="phone"/>&nbsp;&nbsp;库存数量
          <div class="pull-right">{{ assetData.kcsl }}</div>
        </li>
      </ul>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, watch } from "vue";
import request from "@/util/request";
import moment from "moment";

/**
 *对话框属性初始化
 */
const props = defineProps(
        {
          id: {
            type: Number,
            default: -1,
            required: true
          },
          drawerVisible: {
            type: Boolean,
            default: false,
            required: true
          }
        }
)

watch(
        () => props.drawerVisible,
        () => {
          let id = props.id;
          if (id !== -1) {
            initAssetData(id)
          } else {
            emits('update:modelValue', false)
          }
        }
)

/**
 * 向父组件抛方法
 */
const emits = defineEmits(['update:modelValue'])

/**
 * 手动关闭对话框
 */
const handleClose = () => {
  emits('update:modelValue', false)
}

const assetData = ref({})
const initAssetData = async (id) => {
  const res = await request.get("asset/info/" + id);
  trans(res.data.assetList);
}

const trans = (list) => {
  let rowData = {}
  list.forEach((item) => {
    rowData = {
      rksj: item.rksj,
      zcbh: item.zcbh,
      zcmc: item.zcmc,
      typeName: item.assetType2.name,
      zcxh: item.zcxh,
      zcdj: item.zcdj,
      zcje: item.zcje,
      sccj: item.sccj,
      scrq: item.scrq,
      gmrq: item.gmrq,
      gmr: item.gmr,
      sts: item.sts,
      kcsl: item.kcsl,
    }
  })
  console.log(rowData)
  assetData.value = rowData
}

/**
 * 通用格式化时间信息
 * @param data
 * @returns {string}
 */
const currencyFormatDate = (data) => {
  let date = data;
  if (date === undefined) {
    return "";
  }
  return moment(date).format("YYYY-MM-DD");
}
</script>

<style lang="scss" scoped>
.list-group-striped > .list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding-left: 0;
  padding-right: 0;
}

.list-group-item {
  border-bottom: 1px solid #e7eaec;
  border-top: 1px solid #e7eaec;
  margin-bottom: -1px;
  padding: 13px 0;
  font-size: 15px;
}

.pull-right {
  float: right !important;
  font-weight: bold;
}
</style>